import { useState } from "react";
import { Text, View, TextInput, Button, StyleSheet } from "react-native";
import { router } from "expo-router";
import Ionicons from '@expo/vector-icons/Ionicons';

import { useSnapshot } from 'valtio';
import { state } from "@/store/index"


export default function HomeSearch() {
    const Snapsho = useSnapshot(state)

    console.log(Snapsho.SearchKey)

    let { ChangeSearchKey, SearchRecords, clearChangeSearchRecords } = useSnapshot(state) 
    const [search, setSearch] = useState('');
    const searchHandler = async () => {
        await ChangeSearchKey(search)
        setSearch('')
        console.log('搜索完成')

    }
    const OnchangeSearch = (e: string) => {
        setSearch(e)
    }
    return (
        <View style={styles.container}>
            <View style={styles.SearchHeader}>
                <Ionicons name="close" size={26} color="#000000" onPress={() => router.back()} />
                <TextInput placeholder="Search" value={search} autoFocus onChangeText={OnchangeSearch} style={styles.SearchInput} />
                <Text onPress={() => searchHandler()}>搜索</Text>
            </View>
            {/* 搜索记录 */}

            <View style={styles.searchRecords}>
                <View style={styles.searchRecordsHeader}>
                    <Text>搜索记录</Text>
                    <Text onPress={() => clearChangeSearchRecords()}>清除</Text>
                </View>
                <View style={styles.searchRecordsList}>
                    {SearchRecords.map((item: string, index: number) => (
                        <Text key={index} style={styles.searchRecordsListItem}>{item}</Text>
                    ))}
                </View>
            </View>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    SearchHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        paddingVertical: 8,
        backgroundColor: '#fff',
    },
    SearchInput: {
        width: 200,
        height: 30,
        borderWidth: 1,
        borderRadius: 15,
        paddingLeft: 10,
        // 添加伪类
    },
    searchRecords: {
        marginTop: 16,
        paddingHorizontal: 16,
    },
    searchRecordsHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 8,
    }
    , searchRecordsList: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    searchRecordsListItem: {
        paddingVertical: 8,
        paddingHorizontal: 12,
        borderRadius: 15,
        backgroundColor: '#e5e5e5',
        marginBottom: 8,
    }
})